<template>
  <el-table :data="allFunction" style="width: 755px" height="100%" highlight-current-row >
    <el-table-column v-for="(item, index) in titleList" :key="index" prop="name" :label="item.name" width="148">
      <template slot-scope="scope">
        <div style="width:100%;display:flex;justify-content: flex-start;" v-if="index == 0"><el-checkbox v-model="scope.row.allChecked" style="padding-right:2px;" @change="changeItemChecked(scope.row)"></el-checkbox>{{ scope.row.name }}</div>
        
        <div v-else-if="scope.row.options[index]&&scope.row.options[index].hasOption">
          <!-- {{
            scope.row.options.length &&
            scope.row.options[index - 1] &&
            scope.row.options[index - 1].name &&
            scope.row.options[index - 1].name
          }}
          {{ title[index].name }} -->
           <el-checkbox v-model='scope.row.options[index].checked'>{{scope.row.options[index].name}}</el-checkbox>
        </div>
      </template>
    </el-table-column>
   
  </el-table>
</template>

<script>
export default {
  props: {
    functionList: {
      type: Array,
      default: [],
    },
    title: {
      type: Array,
      default: [],
    },
    checkIds: {
      type: Array,
      default: [],
    },
    leftCheckData:{
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      titleList: [],
      allFunction: [],
    }
  },
  watch: {
    functionList: {
      //监听的对象
      deep: true, //深度监听设置为 true
      handler: function (newV, oldV) {
        this.allFunction = newV
      },
    },
    title: {
      deep: true,
      handler: function (newV, oldV) {
        this.titleList = newV
        console.log(this.functionList)
        for (let f = 0; f < this.functionList.length; f++) {
          let fun = this.functionList[f];
           let resultArr = []
          for (let i = 0; i < newV.length; i++) {
            let el = newV[i];
            let item = null
            if(fun.options){
              for (let j = 0; j < fun.options.length; j++) {
                let myitem = fun.options[j];
                if(el.name==myitem.name){
                  item = {...myitem,hasOption:true}
                }
              }
            }
            if(item ==null){
              item = {...el,id:'',hasOption:false}
            }
            resultArr.push(item)
            
          }
          // console.log(resultArr)
          fun.options = [...resultArr]
        }
        // 遍历查找已选中的操作项
        console.log(this.checkIds)
        for (let i = 0; i < this.checkIds.length; i++) {
          let e = this.checkIds[i]
          for (let j = 0; j < this.functionList.length; j++) {
            let op = this.functionList[j].options
            for (let k = 0; k < op.length; k++) {
              let ktem = op[k]
              if (e == ktem.id) {
                ktem.checked = true
                // console.log(this.functionList[j].name,ktem.name)
                continue
              }
            }
          }
        }
        // 判断该功能模块是否拥有所有的操作权限
        for (let i = 0; i < this.functionList.length; i++) {
          const func = this.functionList[i];
          func.allChecked = func.allChecked||false
          let options = func.options
          let isCheckedAll = true
          if(options.length > 0){
            for (let j = 0; j < options.length; j++) {
              let op = options[j];
              if(op.hasOption&&(!op.checked)){
                isCheckedAll = false
              }
            }
            func.allChecked = isCheckedAll
          }
          else{
               func.allChecked = func.allChecked||false
          }
        }
        this.$nextTick(()=>{
          this.allFunction = this.functionList
        })
       
       
      },
    },
    checkIds: {
      deep: true,
      handler: function (newV, oldV) {
        console.log('checkIds改变了')
      },
    },
    leftCheckData:{
      deep:true,
      handler:function(newV,oldV){
        console.log('leftCheckData改变了')
      }
    }
  },
  mounted(){
  },
  methods:{
    changeItemChecked(item){
      console.log(item)
      // item.allChecked = !item.allChecked
    }
  }
}
</script>

<style lang="scss" scoped>

</style>